<template>
    <div class="main">
        <div class="head_bg"></div>
        <div class="head">
            <h2>
                <span v-if="address">{{address}}</span>
                <span v-else>北京市</span>
                <i class="el-icon-position"></i>
            </h2>
            <div class="input" @click="goSearch()">
                <el-input placeholder="快递单号一键查" v-model="input" prefix-icon="el-icon-search">
                </el-input>
                <i class="el-icon-chat-dot-square message"></i>
            </div>
            <div class="small_icon">
                <div class="item">
                    <img src="@/assets/mainpage/1.png">
                    <span>裹酱换好礼</span>
                </div>
                <div class="item">
                    <img src="@/assets/mainpage/2.png">
                    <span>取件赚¥0.01</span>
                </div>
                <div class="item">
                    <img src="@/assets/mainpage/3.png">
                    <span>周六免费寄</span>
                </div>
            </div>
            <div class="sao" @click="goCode()">
                <img src="@/assets/mainpage/sao.png">
            </div>
            <div class="head_btn">
                <a>
                    <img src="@/assets/mainpage/head_icon/5.png">
                    <span>领裹酱</span>
                </a>
                <a>
                    <img src="@/assets/mainpage/head_icon/1.png">
                    <span>VIP会员</span>
                </a>
                <a>
                    <img src="@/assets/mainpage/head_icon/2.png">
                    <span>领劵商城</span>
                </a>
                <a>
                    <img src="@/assets/mainpage/head_icon/3.png">
                    <span>天天赚钱</span>
                </a>
                <a>
                    <img src="@/assets/mainpage/head_icon/4.png">
                    <span>心愿袋</span>
                </a>
            </div>
        </div>
        <div class="receipt_sent">
            <div class="title">
                <span :class="isActive ? 'active' : ''" @click="isActive = true">收件 {{packnum}}</span>
                <span :class="isActive ? '' : 'active'" @click="isActive = false">寄件 {{sendnum}}</span>
            </div>
            <div class="box">
                <div v-if="isActive" class="content">
                    <div v-if="ispack">
                        <img src="@/assets/mainpage/count.png">
                        <span>近期无包裹</span>
                        <a class="btn">
                            <span>去逛逛</span>
                        </a>
                    </div>
                    <div v-else>
                        <ul>
                            <li v-for="(item,index) in packarr" :key="index" class="package">
                                <div class="pack-left">
                                    <img :src="item.img_url">
                                </div>
                                <div class="pack-right">
                                    <span>待发货</span>
                                    <span>{{item.title}}</span>
                                </div>
                            </li>
                            <li v-for="(item, index) in recarr" :key="item.id" class="package">
                                <div class="pack-right flex1">
                                    <span>待发货</span>
                                    <span>{{item.j_name}}寄给你的{{item.info}}离你越来越近了！</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-else class="content">
                    <div v-if="sendnum==0">
                        <img src="@/assets/mainpage/count.png">
                        <span>近期无包裹</span>
                        <span>点击领取寄件优惠劵</span>
                        <a class="btn">
                            <span>领取优惠劵</span>
                        </a>
                    </div>
                    <div v-else>
                        <ul>
                            <li v-for="(item, index) in sendarr" :key="item.id" class="package">
                                <div class="pack-right flex1">
                                    <span>待发货</span>
                                    <span>寄给{{item.s_name}}的{{item.info}}正在飞速赶往目的地！</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <h1 class="guolike">裹然喜欢</h1>

        <div class="shops">
            <div class="shopcard" v-for="(item, index) in shopitems"
                 :key="index"
                 @click="getShop(item.id)"
            >
                <a><img :src="item.img_url"></a>
                <div class="shoptit">{{item.title}}</div>
                <div class="shopprice">¥ {{item.new_price}}</div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "mainpage",
        data() {
            return {
                input: '',
                isActive: true,
                shopitems: [],
                address: '',
                packnum: 0,
                packarr: [],
                sendnum: 0,  // 寄件数量
                sendarr: [],  // 寄件物品
                recarr: []  // 用户收件
            }
        },
        computed:{
            ispack() {
                //  接收浏览器购物车数据
                let send = JSON.parse(sessionStorage.getItem("send")) || [];
                this.packarr = send;

                let newshow = true;
                this.packnum = this.packarr.length + this.recarr.length;
                
                if (this.packnum == 0) {
                    newshow = true;
                } else {
                    newshow = false;
                }
                return newshow;
            },
        },
        mounted() {
            this.$http.get('/api/index')
            .then(({data}) => {
                this.shopitems = data.data;
            })
        },
        methods: {
            getShop(id) {
                this.$router.push('/shop/' + id)
            },
            goCode() {
                this.$router.push('/identityCode')
            },
            goSearch() {
                this.$router.push('/search')
            },
            getLocation() {
                // 创建百度地理位置实例，代替 navigator.geolocation
                let _this = this;
                let geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(e) {
                    if(this.getStatus() == BMAP_STATUS_SUCCESS){
                        // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
                        // console.log(_this.lng, _this.lat);
                        let point = new BMap.Point(e.point.lng, e.point.lat);
                        let gc = new BMap.Geocoder();
                        gc.getLocation(point, function(rs){
                          let addComp = rs.addressComponents;
                            let address = addComp.city+addComp.district+addComp.street;
                            _this.address = address;
                            window.sessionStorage.setItem('address', address);
                        });
                    } else {
                        console.log(this.getStatus());
                    }
                });

            }
        },
        created() {
            let _this = this;
            let id = window.sessionStorage.getItem('phonenum');
            let sessionLocal = window.sessionStorage.getItem('address');
            if (sessionLocal) {
                _this.address = sessionLocal;
            } else {
                _this.getLocation()
            }

            this.$http.get('/api/getexp/' + id)
            .then(({data}) => {
                if (id == data.data[0].j_num) {
                    _this.sendarr = data.data;
                    _this.sendnum = data.data.length;
                    sessionStorage.setItem('sendarr', JSON.stringify(_this.sendarr));
                } else if (id == data.data[0].s_num) {
                    _this.recarr = data.data;
                    _this.packnum += data.data.length;
                }
            })
        }
    }
</script>

<style lang="scss" scoped>
@import "../../style/index/mainpage";
.active {
    color: black !important;
    position: relative;
    &:after {
        content: '';
        display: block;
        position: absolute;
        height: 6px;
        width: 70%;
        background: rgba(10, 62, 233, .7);
        border-radius: 5px;
    }
}
.package{
    display: flex;
    padding: 20px;
    box-shadow: 0 5px 15px 0 rgba(0,0,0,.2);
    border-radius: 5px;
    margin-bottom: 20px;
    .pack-left{
        img{
            border-radius: 10px;
        }
    }
    .pack-right{
        margin-left: 10px;
        justify-content: space-between;
    }
}
</style>